import { View, Text, Button, Input, Textarea } from '@tarojs/components'
import { useState } from 'react'
import Taro from '@tarojs/taro'
import './thre.scss'

// 平台检测函数
const isH5 = () => {
  return process.env.TARO_ENV === 'h5'
}

const isMiniProgram = () => {
  return process.env.TARO_ENV === 'weapp'
}

// 获取API基础URL
const getApiBaseUrl = () => {
  if (isH5()) {
    // H5环境下使用相对路径或配置的代理
    return process.env.NODE_ENV === 'development' 
      ? 'http://localhost:3000' 
      : 'https://your-production-api.com'
  }
  // 小程序环境使用原有的IP地址
  return 'http://192.168.8.53:3000'
}

export default function Thre() {
  const [formData, setFormData] = useState({
    name: '',
    phone: '',
    deviceType: '',
    problem: '',
    address: ''
  })

  // 显示提示信息的兼容函数
  const showToast = (title: string, icon: 'success' | 'none' = 'none') => {
    if (isH5()) {
      // H5环境使用原生alert或自定义提示
      alert(title)
    } else {
      // 小程序环境使用Taro.showToast
      Taro.showToast({
        title,
        icon,
        duration: 2000
      })
    }
  }

  // 显示模态框的兼容函数
  const showModal = (title: string, content: string, onConfirm: () => void) => {
    if (isH5()) {
      // H5环境使用原生confirm
      if (confirm(`${title}\n\n${content}`)) {
        onConfirm()
      }
    } else {
      // 小程序环境使用Taro.showModal
      Taro.showModal({
        title,
        content,
        success: (res) => {
          if (res.confirm) {
            onConfirm()
          }
        }
      })
    }
  }

  // 显示加载中的兼容函数
  const showLoading = (title: string) => {
    if (isH5()) {
      // H5环境可以使用console.log或自定义loading
      console.log(`Loading: ${title}`)
    } else {
      // 小程序环境使用Taro.showLoading
      Taro.showLoading({ title })
    }
  }

  // 隐藏加载中的兼容函数
  const hideLoading = () => {
    if (isH5()) {
      // H5环境不需要特殊处理
      console.log('Loading finished')
    } else {
      // 小程序环境使用Taro.hideLoading
      Taro.hideLoading()
    }
  }

  // 网络请求的兼容函数
  const makeRequest = async (url: string, data: any) => {
    if (isH5()) {
      // H5环境使用fetch
      const response = await fetch(url, {
        method: 'POST',
        headers: {
          'content-type': 'application/json'
        },
        body: JSON.stringify(data)
      })
      const responseData = await response.json()
      return { data: responseData }
    } else {
      // 小程序环境使用Taro.request
      return await Taro.request({
        url,
        method: 'POST',
        data,
        header: {
          'content-type': 'application/json'
        }
      })
    }
  }

  const handleInputChange = (field: string, value: string) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }))
  }

  const handleSubmit = async () => {
    // 验证表单
    if (!formData.name || !formData.phone || !formData.deviceType || !formData.problem) {
      showToast('请填写完整信息')
      return
    }

    // 提交表单
    showLoading('提交中...')
    
    try {
      // 调用后端API创建订单
      const response = await makeRequest(
        `${getApiBaseUrl()}/zpf/create-order`,
        {
          name: formData.name,
          phone: formData.phone,
          deviceType: formData.deviceType,
          problem: formData.problem,
          address: formData.address
        }
      )
      
      hideLoading()
      
      if (response.data.success) {
        // 订单创建成功
        const orderData = response.data.data
        
        showModal(
          '订单创建成功',
          `订单号：${orderData.orderNumber}\n\n请保存好您的订单号，我们将尽快安排维修服务。`,
          () => {
            // 清空表单
            setFormData({
              name: '',
              phone: '',
              deviceType: '',
              problem: '',
              address: ''
            })
            // 跳转到订单列表页面
            Taro.navigateTo({
              url: '/pages/index/ding'
            })
          }
        )
      } else {
        // 订单创建失败
        showToast(response.data.message || '提交失败')
      }
    } catch (error) {
      hideLoading()
      console.error('提交订单失败:', error)
      showToast('网络错误，请稍后重试')
    }
  }

  const goBack = () => {
    if (isH5()) {
      // H5环境下优先使用浏览器返回
      if (window.history.length > 1) {
        Taro.navigateBack()
      } else {
        Taro.navigateTo({
          url: '/pages/index/index'
        })
      }
    } else {
      // 小程序环境
      Taro.navigateTo({
        url: '/pages/index/index'
      })
    }
  }

  return (
    <View className="thre-container">
      <View className="header">
        <Text className="title">维修申请</Text>
        <Button className="back-btn" onClick={goBack}>返回</Button>
      </View>
      
      <View className="form-container">
        <View className="form-item">
          <Text className="label">姓名 *</Text>
          <Input
            className="input"
            placeholder="请输入您的姓名"
            value={formData.name}
            onInput={(e) => handleInputChange('name', e.detail.value)}
          />
        </View>

        <View className="form-item">
          <Text className="label">联系电话 *</Text>
          <Input
            className="input"
            placeholder="请输入您的联系电话"
            value={formData.phone}
            onInput={(e) => handleInputChange('phone', e.detail.value)}
          />
        </View>

        <View className="form-item">
          <Text className="label">设备类型 *</Text>
          <Input
            className="input"
            placeholder="请输入设备类型（如：空调、冰箱等）"
            value={formData.deviceType}
            onInput={(e) => handleInputChange('deviceType', e.detail.value)}
          />
        </View>

        <View className="form-item">
          <Text className="label">故障描述 *</Text>
          <Textarea
            className="textarea"
            placeholder="请详细描述设备故障情况"
            value={formData.problem}
            onInput={(e) => handleInputChange('problem', e.detail.value)}
          />
        </View>

        <View className="form-item">
          <Text className="label">服务地址</Text>
          <Input
            className="input"
            placeholder="请输入服务地址（可选）"
            value={formData.address}
            onInput={(e) => handleInputChange('address', e.detail.value)}
          />
        </View>

        <Button className="submit-btn" onClick={handleSubmit}>
          提交申请
        </Button>
      </View>
    </View>
  )
}
